<template>
  <div class="buyer-customers-list">
    <div class="customers_list_top">
      <!-- <div class="l_text">精选客户</div> -->
      <div class="list_top_name">尊敬的{{ state.dataForm.company }}，请开始装修您的展厅吧~</div>
      <div class="list_top_warn">当前完成度</div>
      <div class="list_top_one" v-if="state.dataForm.progress == 0">0%</div>
      <div class="list_top_two" v-if="state.dataForm.progress == 25">25%</div>
      <div class="list_top_two" v-if="state.dataForm.progress == 50">50%</div>
      <div class="list_top_two" v-if="state.dataForm.progress == 75">75%</div>
      <div class="list_top_three" v-if="state.dataForm.progress == 100">100%</div>
    </div>
    <div class="each_info">
      <div class="each_info_top">
        <!-- 已完成  用if控制显隐 -->
        <img class="complete_icon" v-if="state.dataForm.isBase == 1" src="@/assets/images/complete.png" alt="" />
        <div class="info_top_name">基础信息</div>
        <!-- <el-button class="info_top_example" type="text">查看案例</el-button> -->
      </div>
      <div class="each_info_centent">
        <div class="info_centent_word">基础信息是客户对您企业的第一认知入口，准确完整的信息能快速建立信任，减少客户决策犹豫，信息缺失可能导致潜在客户流失。</div>
        <el-button class="info_centent_button" @click="onbasicInfo()" type="primary">去完善</el-button>
      </div>
    </div>
    <div class="each_info">
      <div class="each_info_top">
        <!-- 已完成  用if控制显隐 -->
        <img class="complete_icon" v-if="state.dataForm.isbook == 1" src="@/assets/images/complete.png" alt="" />
        <div class="info_top_name">电子画册</div>
        <!-- <el-button class="info_top_example" type="text">查看案例</el-button> -->
      </div>
      <div class="each_info_centent">
        <div class="info_centent_word">
          <p>机械产品的技术参数、规格尺寸、适用场景等专业信息，需通过样册系统呈现。客户通常会通过样册评估产品是否符合自身需求，高质量样册能减少 70% 的无效咨询，直接推动合作意向。</p>
          <p>
            <span class="font_wide">注意事项：</span>
            <span>支持 PDF 格式，单文件不超过 50MB（过大可拆分章节上传）</span>
          </p>
        </div>
        <el-button class="info_centent_button" @click="gobook()" type="primary">去完善</el-button>
      </div>
    </div>
    <div class="each_info">
      <div class="each_info_top">
        <!-- 已完成  用if控制显隐 -->
        <img class="complete_icon" v-if="state.dataForm.isDetails == 1" src="@/assets/images/complete.png" alt="" />
        <div class="info_top_name">公司简介</div>
        <!-- <el-button class="info_top_example" type="text">查看案例</el-button> -->
      </div>
      <div class="each_info_centent">
        <div class="info_centent_word">
            <!-- {{ state.dataForm.details }} -->
          <p>机械行业合作周期长、决策谨慎，客户会深入考察企业实力。详实的公司简介能体现专业度与可靠性，尤其对首次合作的客户，可降低合作疑虑。</p>
          <p>
            <span class="font_wide">核心内容建议：</span>
            <span>发展历程（如 "2005 年成立，2010 年获国家级高新技术企业认证"）、生产能力（如 "3 条智能化生产线，年产能 5000 台套"）、资质认证（如 "ISO9001/CE 认证，专利 23 项"）、合作案例（如 "为三一重工 / 徐工集团提供配套设备"） </span>
          </p>
          <p>
            <span class="font_wide">呈现技巧：</span>
            <span>搭配 3-5 张实景图（工厂车间、研发中心、展会现场）增强直观性、控制在 300-500 字，重点突出与客户相关的优势</span>
          </p>
        </div>
        <el-button class="info_centent_button" @click="gointroduction()" type="primary">去完善</el-button>
      </div>
    </div>
    <div class="each_info">
      <div class="each_info_top">
        <!-- 已完成  用if控制显隐 -->
        <img class="complete_icon" v-if="state.dataForm.isvedio == 1" src="@/assets/images/complete.png" alt="" />
        <div class="info_top_name">宣传视频</div>
        <!-- <el-button class="info_top_example" type="text">查看案例</el-button> -->
      </div>
      <div class="each_info_centent">
        <div class="info_centent_word">
          <p>视频能生动呈现企业环境、生产流程、产品运行状态，比文字 / 图片更易留下深刻印象。有宣传视频的展厅，客户停留时长提升 40%，咨询转化率提升 25%。</p>
          <p>
            <span class="font_wide">内容方向：</span>
            <span>企业实力类（工厂全貌、生产线运转、检测流程）、产品演示类（设备操作过程、核心部件特写、实际应用场景）、客户见证类（合作客户评价、现场安装调试视频） </span>
          </p>
          <p>
            <span class="font_wide">格式要求：</span>
            <span>支持 MP4 格式，时长建议 30 秒 - 3 分钟（太长易导致客户流失），分辨率不低于 1080P，保证画面清晰（尤其机械细节展示），建议添加字幕（关键参数、优势说明），适配静音观看场景</span>
          </p>
        </div>
        <el-button class="info_centent_button" @click="gopromotion()" type="primary">去完善</el-button>
      </div>
    </div>
  </div>
  <!-- 基础信息 -->
  <basicInformation v-if="basicInfoType" :info="state.dataForm" ref="basicInfoRef" :closeBasicInfo="closeBasicInfo" />
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, onActivated,nextTick } from "vue";
// 基础信息
import basicInformation from "./components/basic-information.vue";
import useView from "@/hooks/useView";

import baseService from "@/service/baseService";
// import { CacheToken } from "@/constants/cacheKey";
import { getCache, setCache } from "@/utils/cache";
// 引入 CompanyInfo 组件
// import CompanyInfo from "./constants/CompanyInfo.vue";
// 引入 OpenMember 组件
// import OpenMember from "./constants/OpenMember.vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const basicInfoType = ref(false);
const router = useRouter();
// 加载状态
const isLoading = ref(false);

const options = ref([]);

const showModal = ref(false);

const companyInfoList = ref({});

const view = reactive({
  dataForm: {
    company: "",
    isBase: 0,
    isDetails: 0,
    isbook: 0,
    isvedio: 0,
    progress: 0,
    details:""
  }
});
const state = reactive({ ...useView(view), ...toRefs(view) });
const basicInfoRef = ref();

const onbasicInfo = () => {
  basicInfoType.value = true;
  nextTick(() => {
    // console.log('basicInfoRef',basicInfoRef.value.dataForm.compVideo=)
    // state.dataForm
    basicInfoRef.value.init();
    });
};

const closeBasicInfo = () => {
  basicInfoType.value = false;
  console.log("Parent method called!");
  init();
};
const gobook = () => {
  router.replace({
    path: "/buyer/showroom/pictureBook"
  });
};
const gointroduction = () => {
  router.replace({
    path: "/buyer/showroom/introduction",
    query: { details: state.dataForm.details  }
  });
};
const gopromotion = () => {
  router.replace({
    path: "/buyer/showroom/promotion"
  });
};
const init = () => {
  //   isLoading.value = true; // 开始加载
  //   companyInfoList.value = [];
  baseService.get("/noc/nocuser/getNocUserEx", {}).then((res) => {
    if (res.code == 0) {
      //刷新
      state.dataForm = res.data;

    }
  });
  //   baseService.get("/noc/basearea/getCity", {}).then((res) => {
  //     if (res.code == 0) {
  //       options.value = res.list;
  //       //刷新
  //       // companyInfoList.value = res.list;
  //     }
  //   });
};
// 组件挂载时执行初始化操作
onMounted(() => {
  // 可以在这里添加获取买家客户列表数据的逻辑
  console.log("买家客户列表页面已加载");
  // 新增：使用 CacheToken 获取缓存的 token
  //   const token = getCache(CacheToken, { isSessionStorage: true });
  //   showModal.value = !token.isObtainedVipFree;
  //   console.log("获取到的缓存 token:", token);
  // init();
});
onActivated(() => {
  console.log("页面已显示");
  init(); // 重新加载数据
});
</script>
<style lang="less" scoped>
.el-card__body:has(> .buyer-customers-list) {
  padding: 0 !important;
  /* 取消默认padding */
}

::v-deep .el-input-group--prepend .el-input-group__prepend .el-select .el-input.is-focus .el-input__wrapper:focus {
  // ... existing code ...
  box-shadow: none !important;
  /* 添加此行移除阴影 */
}

/* 额外覆盖可能的hover状态 */
::v-deep .el-input-group--prepend .el-input-group__prepend .el-select.custom-select:hover .el-input__wrapper,
::v-deep .el-input-group--prepend .el-input-group__prepend .el-select.custom-select .el-input__wrapper:hover {
  box-shadow: none !important;
  border-color: #dcdfe6 !important;
}
::v-deep(.buyer-customers-list[data-v-07372378] .custom-select) {
  border-right: 1px solid rgba(22, 119, 255, 1) !important;
}
.buyer-customers-list {
  // background: url("@/assets/images/bug_ba.png") no-repeat top left;
  background-size: 100% auto;
  font-family: "Microsoft YaHei";
  min-height: 100vh;
  position: relative;

  .customers_list_top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 102px;
    font-size: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    margin: 0 30px;
    box-sizing: border-box;

    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0px;
    color: rgb(0, 0, 0);
    .list_top_name {
      font-family: "Microsoft YaHei";
      padding-left: 40px;
      font-weight: bold;
      background: url("@/assets/images/PremiumImages.png") no-repeat left center;
      background-size: 21.04px 23px;
    }
    .list_top_warn {
      margin-left: 12px;
    }
    .list_top_one {
      margin-left: 10px;
      font-size: 30px;
    }
    .list_top_two {
      margin-left: 10px;
      font-size: 30px;
      color: rgba(97, 255, 244, 1);
    }
    .list_top_three {
      margin-left: 10px;
      color: rgba(255, 141, 26, 1);
      font-size: 30px;
    }
  }

  .each_info {
    margin: 0px 30px 40px 30px;
    box-sizing: border-box;
    border-radius: 5px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(168, 171, 178, 1);
    .each_info_top {
      width: 100%;
      height: 43px;
      background: rgba(239, 244, 255, 1);
      border-radius: 5px;
      padding: 0 33px 0 39px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      .complete_icon {
        width: 43px;
        position: absolute;
        left: 0;
        top: 0;
      }
      .info_top_name {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 23.17px;
        color: rgba(56, 56, 56, 1);
      }
      .info_top_example {
      }
    }
    .each_info_centent {
      display: flex;
      justify-content: space-between;
      min-height: 90px;
      padding: 0 33px 0 40px;
      box-sizing: border-box;
      .info_centent_word {
        padding-top: 8px;
        box-sizing: border-box;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: rgba(56, 56, 56, 1);
        margin-right: 24px;
        .font_wide {
          font-weight: 700;
        }
      }
      .info_centent_button {
        flex: none;
        margin-top: 28px;
        width: 100px;
        height: 32px;
      }
    }
  }
  :deep(.custom-select .el-input__wrapper) {
    /* 取消边框 */
    /* 取消焦点状态下的边框和阴影 */
    box-shadow: none !important;
    /* 可选：如果需要移除背景色 */
    background-color: transparent !important;
  }
  /* 单独设置文字颜色，避免嵌套穿透问题 */
  ::v-deep(.custom-select .el-input__inner) {
    color: rgba(22, 119, 255, 1) !important;
  }
  /* 单独设置文字颜色，避免嵌套穿透问题 */
  ::v-deep(.custom-select .el-input .el-select__caret.el-icon) {
    // ... existing code ...
    color: rgba(22, 119, 255, 1) !important;
    fill: rgba(22, 119, 255, 1) !important; // 针对SVG图标
    // ... existing code ...
  }
  ::v-deep(.el-input-group--append > .el-input__wrapper) {
    box-shadow: none !important;
  }
  .el-select.custom-select .el-input__suffix-inner,
  .el-select.custom-select .el-input__suffix-inner::after,
  .el-select.custom-select .el-icon-arrow-down {
    color: rgba(22, 119, 255, 1) !important;
    fill: rgba(22, 119, 255, 1) !important;
    border-color: rgba(22, 119, 255, 1) !important;
    opacity: 1 !important;
  }
  :deep(.custom-select) {
    // 调整输入框高度
    width: 97px;
    height: 46px;
    background: #fff;
    border-right: 1px solid rgba(22, 119, 255, 1);
    padding-top: 7px;
    color: rgba(22, 119, 255, 1);

    // 新增：全场景焦点状态重置（覆盖所有可能触发边框的元素）
    &,
    &.is-focus,
    &:focus,
    &:focus-within,
    .el-select__wrapper,
    .el-select__wrapper:focus-within,
    .el-input,
    .el-input__wrapper,
    .el-input__inner {
      border-color: rgba(212, 212, 212, 1) !important;
      box-shadow: none !important;
      outline: none !important;
    }

    // 内部输入框焦点状态重置
    .el-input__inner {
      &:focus {
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
      }
    }

    // 下拉触发区域样式
    .select-trigger {
      width: 78px;
    }

    // 修改输入框字体颜色
    :deep(.el-input__inner) {
      color: rgba(22, 119, 255, 1);
    }

    // 修改箭头样式

    /* 覆盖所有可能的箭头元素 */
    :deep(.el-input-group__prepend .el-select.custom-select .el-input__suffix),
    :deep(.el-input-group__prepend .el-select.custom-select .el-input__suffix-inner),
    :deep(.el-input-group__prepend .el-select.custom-select .el-input__suffix-inner::after),
    :deep(.el-input-group__prepend .el-select.custom-select .el-icon-arrow-down) {
      color: rgba(22, 119, 255, 1) !important;
      fill: rgba(22, 119, 255, 1) !important;
      border-color: rgba(22, 119, 255, 1) transparent transparent !important;
      opacity: 1 !important; /* 确保箭头可见 */
    }

    /* 下拉面板箭头 */
    :deep(.el-select-dropdown__arrow) {
      border-top-color: rgba(22, 119, 255, 1) !important;
    }
  }

  .selectedRegion {
    max-width: 1131px;
    // width: 1131px;
    margin: 0 auto;
    padding-top: 39px;
    font-size: 16px;

    .Search {
      border-radius: 3px;
      width: 106px;
      height: 46px;
      text-align: center;
      line-height: 46px;
      color: #fff;
      font-size: 16px;
      background: rgba(255, 152, 48, 1);
      cursor: pointer;
    }

    :deep(.el-input-group__prepend) {
      /* 设置内边距，可根据需求调整值 */
      padding: 0;
      background: #fff;
    }

    // 新增样式，取消 .el-input-group__append 的 padding
    :deep(.el-input-group__append) {
      padding: 0;
    }

    :deep(.custom-cascader .el-input__wrapper) {
      margin-top: 3px;

      /* 取消边框 */
      border: none;
      /* 取消阴影 */
      box-shadow: none;
    }

    :deep(.custom-cascader) {
      // 调整输入框高度
      width: 97px;
      height: 46px;
      background: #fff;
      border: 1px solid rgba(212, 212, 212, 1);
      border-right: none;
      padding-top: 7px;
      color: rgba(22, 119, 255, 1);

      .el-input {
        height: 35px;
        line-height: 35px;
        border-right: 2px solid rgba(135, 185, 255, 1);
      }

      // 修改输入框字体颜色
      :deep(.el-input__inner) {
        color: rgba(22, 119, 255, 1);
      }

      // 调整下拉面板背景色
      .el-cascader-panel {
        background-color: #f9f9f9;
      }

      // 调整选项悬停状态样式
      .el-cascader-node:hover {
        background-color: #e6f7ff;
      }

      // 调整选中选项样式
      .el-cascader-node.is-active {
        color: #1890ff;
      }

      // 修改箭头样式
      :deep(.el-input__suffix-inner .el-icon-arrow-down) {
        // 修改箭头颜色
        color: #1890ff !important;
        // 修改箭头大小
        font-size: 16px !important;
        // 可以添加其他样式，如旋转、过渡效果等
        transition: transform 0.3s ease;
      }

      // 下拉面板展开时箭头旋转效果
      &.is-focus :deep(.el-input__suffix-inner .el-icon-arrow-down) {
        transform: rotate(180deg) !important;
      }

      :deep(.input-with-select .el-input__wrapper) {
        /* 取消左边框 */
        border-left: none;
        /* 取消左阴影 */
        box-shadow: none !important;
      }

      // 修改输入框字体颜色
      :deep(.el-input__inner) {
        color: #ff0000; // 可根据需求修改颜色值
      }

      // 修改下拉面板选项字体颜色
      :deep(.el-cascader-panel .el-cascader-node__label) {
        color: #00ff00; // 可根据需求修改颜色值
      }

      // 修改选中选项字体颜色
      :deep(.el-cascader-panel .el-cascader-node.is-active .el-cascader-node__label) {
        color: #0000ff; // 可根据需求修改颜色值
      }
    }
  }

  .list {
    padding-top: 46px;
    margin: 0 80px;

    .l_text {
      font-size: 20px;
      font-family: "Microsoft YaHei";
      padding-left: 30px;
      font-weight: bold;
      line-height: 50px;
      background: url("@/assets/images/PremiumImages.png") no-repeat left center;
      background-size: 21.04px 23px;
      border-bottom: 1px solid rgba(199, 199, 199, 1);
    }
  }
}
</style>
